<template>
  <div>
    <main-view @mapLoaded="mapLoaded">
      <div class="btn">
        <button class="btn-pipe" @click="changePipeOffset">管线上升</button>
        <button class="btn-pipe" @click="onFixedRoute">行人漫游</button>
        <button class="btn-pipe" @click="startDraw">绘制面</button>
        <button class="btn-pipe" @click="stopDraw">结束绘制</button>
        <button class="btn-pipe" @click="setStyle1">动态特效</button>
        <button class="btn-pipe" @click="setStyle3">夜景贴图</button>
        <!-- <button class="btn-pipe" @click="setStyle2">动态特效2</button> -->
      </div>
    </main-view>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import * as mars3d from "mars3d"
import mainView from '@/components/mars-work/main-view.vue'
import { useTilesetLayer } from '@/hooks/useTilesetLayer'
import { usePolyline } from '@/hooks/usePolyline'
import { useRiver } from '@/hooks/useRiver'
import { useFixedRoute } from '@/hooks/useFixedRoute'
import { useMarkerPoint } from '@/hooks/useMarkerPoint'
import { useWallEntity } from '@/hooks/useWallEntity'
import { usePopup } from '@/hooks/usePopup'

const mapInstance = ref(null)
const graphicLayer = ref(null)

const { initTilesetLayer, removeLayer, setStyle2, setStyle1,setStyle3 } = useTilesetLayer(mapInstance)
const { initPolyline, changePipeOffset } = usePolyline(mapInstance, graphicLayer)
const { initRiver, startDraw,stopDraw } = useRiver(graphicLayer)
const { initFixedRoute, onFixedRoute } = useFixedRoute(graphicLayer)
const { initBillboardEntity } = useMarkerPoint(graphicLayer)
const { initWallEntity } = useWallEntity(graphicLayer)
const { initPopup } = usePopup(graphicLayer)

const mapLoaded = ({ _mapInstance, _graphicLayer }) => {
  mapInstance.value = _mapInstance
  graphicLayer.value = _graphicLayer
  // 加载tileset
  initTilesetLayer()
  // 绘制管线
  initPolyline()
  // 图层上绑定Popup弹窗
  initPopup()
  // 河流
  initRiver()
  // 添加示例图形
  initBillboardEntity()
  // 墙 Entity矢量数据
  // initWallEntity()
  // 行人漫游
  // initFixedRoute()
}
</script>


<style lang="less" scoped>
.btn {
  position: absolute;
  top: 20px;
  left: 20px;
}
.btn-pipe {
  background: rgba(0, 0, 0, 0.5);
  color: #eee7e7;
  padding: 5px 3px;
  margin-right: 10px;
}
</style>
